<template>
  <div>
    <p>App3组件</p>
    <!-- <p>{{ sum }}--{{ doubleSum }}-<button @click="sum++">sum++</button></p> -->

    <!-- vue2写法使用: -->
    <!-- <p>
      <span>{{ sum }}</span>
      <input type="text" v-model="doubleSum" />
      <button @click="sum++">sum++</button>
    </p> -->

    <!-- vue3写法使用 -->
    <p>
      <input type="text" v-model="userinfo.firstname" placeholder="姓" />
      <input type="text" v-model="userinfo.lastname" placeholder="名" />
      <input type="text" v-model="userinfo.fullname" placeholder="全名" />
    </p>
  </div>
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      sum: 0,
    };
  },
  //   computed: {
  //     //简写方式
  //     // doubleSum() {
  //     //   return this.sum * 2;
  //     // },
  //     // 常规写法:
  //     doubleSum: {
  //       get() {
  //         return this.sum * 2;
  //       },
  //       set(val) {
  //         console.log(val);
  //         this.sum = val;
  //       },
  //     },
  //   },

  setup() {
    let userinfo = reactive({
      firstname: "",
      lastname: "",
      fullname: "",
    });

    // 将fullname设置为计算属性 (简写方式)
    // userinfo.fullname = computed(() => {
    //   console.log("计算");
    //   return userinfo.firstname + userinfo.lastname;
    // });

    // 将fullname设置为计算属性 (常规写法)
    userinfo.fullname = computed({
      get() {
        return userinfo.firstname + userinfo.lastname;
      },
      set(val) {
        userinfo.firstname = val.substr(0, 1);
        userinfo.lastname = val.substr(1);
      },
    });
    return {
      userinfo,
    };
  },
};
</script>
<style scoped>
</style>